<template>
  <view class="my-resume-page">
    <nav-header title="我的简历"></nav-header>
    
    <view class="content" :style="{ paddingTop: statusBarHeight + 44 + 'px' }">
      <!-- Resume List -->
      <view class="resume-list" v-if="resumeList.length > 0">
        <view 
          class="resume-item" 
          v-for="(resume, index) in resumeList" 
          :key="index"
        >
          <view class="resume-preview" @click="viewResume(resume.resumeId)">
            <image class="preview-image" :src="resume.previewImage" mode="aspectFill"></image>
          </view>
          <view class="resume-info">
            <view class="resume-header">
              <text class="resume-name">{{ resume.resumeName }}</text>
              <text class="update-time">更新于 {{ resume.updateTime }}</text>
            </view>
            <view class="resume-actions">
              <view class="action-btn edit-btn" @click="editResume(resume.resumeId)">
                <image class="action-icon" src="/static/icons/edit.png" mode="aspectFit"></image>
                <text>编辑</text>
              </view>
              <view class="action-btn share-btn" @click="shareResume(resume.resumeId)">
                <image class="action-icon" src="/static/icons/share.png" mode="aspectFit"></image>
                <text>分享</text>
              </view>
              <view class="action-btn delete-btn" @click="confirmDelete(resume.resumeId)">
                <image class="action-icon" src="/static/icons/delete.png" mode="aspectFit"></image>
                <text>删除</text>
              </view>
            </view>
          </view>
        </view>
      </view>
      
      <!-- Empty State -->
      <view class="empty-state" v-else>
        <image class="empty-icon" src="/static/images/empty-resume.png" mode="aspectFit"></image>
        <text class="empty-text">你还没有创建简历</text>
        <text class="empty-desc">开始创建一份专业简历吧</text>
      </view>
      
      <!-- Create Resume Button -->
      <view class="create-btn" @click="createResume">
        <text class="btn-icon">+</text>
        <text>创建新简历</text>
      </view>
    </view>
    
    <!-- Delete Confirmation -->
    <uni-popup ref="deletePopup" type="dialog">
      <uni-popup-dialog
        type="warning"
        title="删除确认"
        content="确定要删除该简历吗？删除后将无法恢复。"
        :before-close="false"
        @confirm="deleteResume"
        @close="closeDialog"
      ></uni-popup-dialog>
    </uni-popup>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useResumeStore } from '@/store/resume.js'
import { getresumeList } from '@/api/my/resume.js'
import NavHeader from '@/components/nav-header.vue'
import { useAuthStore } from '@/store/index';

const authStore = useAuthStore();
const resumeStore = useResumeStore()
const statusBarHeight = ref(20)
const resumeList = ref([])
const deletePopup = ref(null)
const currentResumeId = ref('')

const queryParams = ref({
	pageNum: 1,
	pageSize: 8,
	userId: authStore.userId,
	taskNumber:''
})
onMounted(() => {
  // 获取状态栏高度
  const systemInfo = uni.getSystemInfoSync()
  statusBarHeight.value = systemInfo.statusBarHeight
  
  // 加载简历列表
  loadResumeList()
})

// 加载简历列表
const loadResumeList = async () => {
	const res = await getresumeList(queryParams.value)
	if(res.code == 200) {
		console.log(res.rows)
		resumeList.value=res.rows
	}
  // 模拟数据，实际项目中应该从后端或本地存储获取
  // resumeList.value = [
  //   {
  //     id: '1',
  //     name: '前端开发工程师简历',
  //     updateTime: new Date('2025-04-15T10:30:00'),
  //     previewImage: '/static/images/resume-preview-1.png'
  //   },
  //   {
  //     id: '2',
  //     name: '产品经理简历',
  //     updateTime: new Date('2025-04-12T14:20:00'),
  //     previewImage: '/static/images/resume-preview-2.png'
  //   }
  // ]
}

// 格式化日期
const formatDate = (date) => {
  if (!date) return ''
  
  const now = new Date()
  const diff = now - date
  
  const day = 24 * 60 * 60 * 1000
  const week = 7 * day
  
  if (diff < day) {
    return '今天'
  } else if (diff < 2 * day) {
    return '昨天'
  } else if (diff < week) {
    return Math.floor(diff / day) + '天前'
  } else {
    const year = date.getFullYear()
    const month = String(date.getMonth() + 1).padStart(2, '0')
    const day = String(date.getDate()).padStart(2, '0')
    return `${year}-${month}-${day}`
  }
}

// 查看简历
const viewResume = (id) => {
  uni.navigateTo({
    url: `/pages/resume/preview?id=${id}`
  })
}

// 编辑简历
const editResume = (id) => {
  uni.navigateTo({
    url: `/pages/resume/edit/index?id=${id}`
  })
}

// 分享简历
const shareResume = (id) => {
  uni.showModal({
    title: '分享简历',
    content: '分享功能开发中，敬请期待',
    showCancel: false,
    confirmText: '确定'
  })
}

// 确认删除
const confirmDelete = (id) => {
  currentResumeId.value = id
  deletePopup.value.open()
}

// 关闭对话框
const closeDialog = () => {
  currentResumeId.value = ''
}

// 删除简历
const deleteResume = () => {
  if (currentResumeId.value) {
    // 从列表中删除简历
    resumeList.value = resumeList.value.filter(item => item.id !== currentResumeId.value)
    
    // 实际项目中需要同步到后端或本地存储
    
    // 提示成功
    uni.showToast({
      title: '删除成功',
      icon: 'success'
    })
    
    // 重置当前ID
    currentResumeId.value = ''
  }
}

// 创建新简历
const createResume = () => {
  uni.navigateTo({
    url: '/pages/template/list'
  })
}
</script>

<style lang="scss" scoped>
.my-resume-page {
  min-height: 100vh;
  background-color: #F8F8F8;
  
  .content {
    padding: 16px;
    padding-bottom: 80px;
  }
  
  .resume-list {
    margin-bottom: 20px;
    
    .resume-item {
      background-color: #FFFFFF;
      border-radius: 12px;
      margin-bottom: 16px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
      overflow: hidden;
      
      .resume-preview {
        height: 160px;
        overflow: hidden;
        
        .preview-image {
          width: 100%;
          height: 100%;
        }
      }
      
      .resume-info {
        padding: 16px;
        
        .resume-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 12px;
          
          .resume-name {
            font-size: 16px;
            font-weight: 500;
            color: #333;
            flex: 1;
          }
          
          .update-time {
            font-size: 12px;
            color: #999;
          }
        }
        
        .resume-actions {
          display: flex;
          
          .action-btn {
            flex: 1;
            height: 40px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            border-right: 1px solid #f0f0f0;
            
            &:last-child {
              border-right: none;
            }
            
            .action-icon {
              width: 20px;
              height: 20px;
              margin-bottom: 4px;
            }
            
            text {
              font-size: 12px;
              color: #666;
            }
            
            &.edit-btn {
              color: #5ac725;
            }
            
            &.delete-btn {
              color: #ff4d4f;
            }
          }
        }
      }
    }
  }
  
  .empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 0;
    
    .empty-icon {
      width: 140px;
      height: 140px;
      margin-bottom: 16px;
    }
    
    .empty-text {
      font-size: 18px;
      font-weight: 500;
      color: #333;
      margin-bottom: 8px;
    }
    
    .empty-desc {
      font-size: 14px;
      color: #999;
    }
  }
  
  .create-btn {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    height: 44px;
    padding: 0 24px;
    background-color: #5ac725;
    border-radius: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(90, 199, 37, 0.3);
    
    .btn-icon {
      font-size: 20px;
      color: #FFFFFF;
      margin-right: 6px;
    }
    
    text {
      font-size: 16px;
      color: #FFFFFF;
    }
  }
}
</style> 